<template>
  <div class="header">
    <el-header>
      <div class="title">初中生心理健康预警系统</div>
      <div class="user-info">
        <span class="user-name">{{ name }}</span>
        <el-button 
          type="text"
          size="small"
          class="logout-btn"
          @click="handleLogout"
        >
          <i class="	el-icon-switch-button"></i> 退出登录
        </el-button>
      </div>
    </el-header>
  </div>
</template>

<script>
export default {
  name: 'MainHeader',
  data() {
    return {
      name: ''
    }
  },
  methods: {
    // 修正方法名，与@click绑定一致
    handleLogout() {
      // 清除登录状态
      localStorage.removeItem('userInfo');
      localStorage.removeItem('token');
      // 跳转到登录页（假设登录页路径是/login）
      this.$router.push('/login');
    }
  },
 mounted() {
  console.log('localStorage userInfo:', localStorage.getItem('userInfo'));
  const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
  console.log('Parsed userInfo:', userInfo);
  this.name = userInfo.userName || '用户';
}
}
</script>

<style lang="scss" scoped>
.header {
  .el-header {
    background: #2578b5;
    color: #fff;
    line-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center; // 关键：让内容在水平方向居中
    padding: 0 20px;
    box-sizing: border-box;
  }
  .title {
    font-size: 30px;
    max-width: calc(100% - 200px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .user-info {
    position: absolute; // 使用户信息和退出登录按钮脱离标准流
    right: 20px; // 定位到右侧
    display: flex;
    align-items: center;
    gap: 15px;
  }
  .logout-btn {
    color: #fff;
    padding: 5px 10px;
    min-width: 90px;
    white-space: nowrap;
    font-size: 14px;
    display: inline-block;
    text-align: center;
    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 4px;
    }
  }
}
</style>